import { useMemo } from 'react';

import { FlowNodeInputTypeEnum } from '@/types/workflow/constant';
import { FlowNodeOutputItemType } from '@/types/workflow/io';

import { NodeCardProps } from '../render/NodeCard';
import { ReferenceLabel } from '../render/RenderInput/templates/Reference';

function NodeVariableUpdateFolded(props: NodeCardProps) {
  const { inputs, nodeId } = props;
  const inputString = useMemo(() => JSON.stringify(inputs), [inputs]);
  const copyInputs = useMemo(() => {
    return JSON.parse(inputString) as FlowNodeOutputItemType[];
  }, [inputString]);

  return (
    <div className="mb-2 ml-2 p-2 text-gray-600">
      <div className="flex w-full gap-2">
        <span className="flex-shrink-0 text-xs font-font-weight-400 text-text-4">赋值</span>
        {copyInputs.map((item) => {
          return (
            <div key={item.id} className="flex flex-col gap-2 text-xs text-text-5">
              {item.value.map((item1: any, index: number) => {
                return (
                  <div
                    key={item1.id + index}
                    className="flex gap-2 rounded-[4px] bg-fill-2 p-1 px-2"
                  >
                    {item1.variable && item1.variable.length > 1 && item1.variable[1] ? (
                      <ReferenceLabel nodeId={nodeId} variable={item1.variable} />
                    ) : (
                      '未选择变量'
                    )}
                    <span>=</span>
                    {item1.renderType === FlowNodeInputTypeEnum.input ? (
                      <span>
                        {item1.value && item1.value.length > 1 && item1.value[1]
                          ? item1.value
                          : '未赋值'}
                      </span>
                    ) : (
                      <div>
                        {item1.value && item1.value.length > 1 && item1.value[1] ? (
                          <ReferenceLabel nodeId={nodeId} variable={item1.value} />
                        ) : (
                          '未赋值'
                        )}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default NodeVariableUpdateFolded;
